<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信云平台运营系统 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link href="/resources/css/bootstrap.min14ed.css?v=3.3.6" th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link href="/resources/css/font-awesome.min93e3.css?v=4.4.0" th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link href="/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css" th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link href="/resources/css/animate.min.css" th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link href="/resources/css/style.min862f.css?v=4.1.0" th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/resources/css/select2.css}" rel="stylesheet">
    <link href="/resources/css/plugins/sweetalert/sweetalert.css" th:href="@{/resources/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .modal-body input{
            width:150px;
        }
        .select2-container {
            width: 291px !important;
        }
        .select2-dropdown {
            width: 295px !important;
        }
        .select2-container .select2-selection--single{
            width:295px;
        }
        .complaintNumber{
            text-decoration: underline;
            color:green;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active" id="agentTab" ><a data-toggle="tab" href="#tab-1" aria-expanded="true">通道运营分析</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="ibox ">
                                        <!-- 搜索条件 -->
                                        <div class="ibox-content">
                                            <input type="hidden" th:value="${jsmsMenu.menuId}" id="menuId">
                                            <div class="row">
                                                <form role="form" class="form-inline" id="mainForm" method="POST">
                                                    <div class="form-group">
                                                        <label for="channelId">通道:</label>
                                                        <select id="channelId" class="form-control" name="channelId">

                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="operatorstype">运营商:</label>
                                                        <select id="operatorstype" class="form-control" name="operatorstype">
                                                            <option value="">全部运营商</option>
                                                            <option value="1">移动</option>
                                                            <option value="2">联通</option>
                                                            <option value="3">电信</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="ownerType">通道来源:</label>
                                                        <select id="ownerType" class="form-control" name="ownerType">
                                                            <option value="">全部来源</option>
                                                            <option value="1">自有</option>
                                                            <option value="2">直连</option>
                                                            <option value="3">第三方</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group" id="sandbox-container" >
                                                        <div class="form-group pull-right"><span style="font-weight:700">月份:</span>
                                                            <input placeholder="起始月份" class="form-control layer-date" id="dateStart" name="dateStart" style="width:102px;"/>至
                                                            <input placeholder="截止月份" class="form-control layer-date" id="dateEnd" name="dateEnd" style="width:102px;"/>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="sort">排序:</label>
                                                        <select id="sort" class="form-control" name="sort">
                                                            <option value="1">按低消完成率由高到低</option>
                                                            <option value="2">按低消完成率由低到高</option>
                                                            <option value="3">按投诉率由高到低</option>
                                                            <option value="4">按投诉率由低到高</option>
                                                            <option value="5">按投诉差异值由高到低</option>
                                                            <option value="6">按投诉差异值由低到高</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-primary" onclick="search()">搜索</button></span>
                                                        <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-danger hide" onclick="exportExcel()" data-menuId='6708'>导出</button></span>
                                                    </div>

                                                </form>
                                            </div>
                                        </div>

                                        <div class="ibox-content">
                                            <div class="jqGrid_wrapper">
                                                <table id="table_list"></table>
                                                <div id="pager_list"></div>
                                            </div>
                                            <p>&nbsp;</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div><!-- panel-body -->
                    </div><!-- tab-1 -->



                </div><!-- panel-body -->
            </div><!-- tab-2 -->
        </div><!-- tab-content -->
    </div><!-- tabs-container-->
</div><!-- col-sm-12 -->
</div><!-- row -->
</div>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<!--<script th:src="@{/resources/js/plugins/layer/laydate/laydate.js}"></script>-->
<script th:src="@{/resources/js/plugins/laydate/laydate.js}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/resources/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/resources/js/jquery.form.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/common.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/select2.min.js}"></script>
<script th:src="@{/resources/js/layer/layer.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/


    laydate.render({
        elem: '#dateStart',
        min: -180,
        max: 0,
        type: 'month'
    });
    laydate.render({
        elem: '#dateEnd',
        min: -180,
        max: 0,
        type: 'month'
    });
    function search(){

        $("#table_list").jqGrid('setGridParam',{
            datatype:'json',
            postData: {
                channelId:$("#channelId").val(),
                operatorstype:$("#operatorstype").val(),
                ownerType:$("#ownerType").val(),
                dateStart:$("#dateStart").val(),
                dateEnd:$("#dateEnd").val(),
                sort:$("#sort").val()
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入
    }

    //功能按钮权限
    function completeMethod(){
        var menuId = $("#menuId").val();
        checkMenu(menuId);
    }

    function getChannelList(){
        var list = []
        $.ajax({
            url : '/operation/statistics/complaint/queryListForChannel',
            type:'POST',
            success : function (res) {
                if(!(res.length > 0)){
                    return;
                }
                for(var i = 0; i < res.length; i++){
                    list[i] = {};
                    list[i].id = res[i].cid;
                    list[i].text = res[i].cid + "-" +res[i].channelname;
                }
                list.unshift({id:" ",text:"全部通道"})
                //初始化select2
                $("#channelId").select2({
                    data : list
                })
            }
        })

    }
    function jumpPage(cid, channelName,dateStr){
        location.href = "/operation/statistics/complaint/complaints?channelId=" + cid + "&channelName=" + channelName+"&dateStr=" + dateStr;
    }
    function exportExcel(){
        var totalCount = $("#table_list").jqGrid('getGridParam','records');
        if (totalCount == 0) {
            layer.msg("共0条记录，将不导出Excel文件", {icon: 2});
            return;
        }
//        if(totalCount > max_export_num){
//            layer.msg("导出Excel文件条数大于"+max_export_num+"条", {icon: 2});
//            return;
//        }
        var mainForm = $("#mainForm");
        var action = mainForm.attr("action") || "";
        var exporUrl = "/operation/statistics/channel/channelOperationStatisticsExport";
        mainForm.attr("action", exporUrl).submit();
        mainForm.attr("action", action);
    }
    $(document).ready(function () {
        getChannelList();
        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#table_list").jqGrid({
            url:/*[[@{/operation/statistics/channel/searchChannelOperationStatistics}]]*/'',
            mtype: 'POST',
            datatype: "json",
            jsonReader : {
                root:"data",
                page: "pageNo",
                total: "totalPage",
                records: "totalRecord"
            },
            postData : {
                channelId:$("#channelId").val(),
                operatorstype:$("#operatorstype").val(),
                ownerType:$("#ownerType").val(),
                dateStart:$("#dateStart").val(),
                dateEnd:$("#dateEnd").val(),
                sort:$("#sort").val()
            },
            height: 'auto',
            rownumbers:true,
            autowidth: true,
            shrinkToFit: false,
            autoScroll: true,
            rowNum: 20,
            rowList: [10, 20, 30,50],
            colModel: [
                {label:'通道号',name: "channelId",align: "left",sortable:false,width:'120'},
                {label:'通道名称',name: "channelname",align: "left",sortable:false},
                {label:'运营商',name: "operatorstypeStr", align: "left",sortable:false},
                {label:'提交条数',name: "submitTotal", align: "left",sortable:false},
                {label:'明确成功条数',name: "reportsuccess", align: "left",sortable:false,width:'120'},
                {label:'发送成功率',name: "sendSuccessRatio", align: "left",sortable:false,
                    formatter:function(cellvalue, options, rowObject){
                        var sendSuccessRatio = rowObject.sendSuccessRatio;
                        var percent = rowObject.sendSuccessRatioStr;

                        return "<div>"+ percent +"</div>"



                    }
                },
                {label:'低销条数',name: "lowConsumeNumber", align: "left",sortable:false},
                {label:'低销完成率',name: "lowConsumeRatio", align: "left",sortable:false,
                    formatter:function(cellvalue, options, rowObject){
                        var lowConsumeRatio = rowObject.lowConsumeRatio;
                        var percent = rowObject.lowConsumeRatioStr;
                        var _lowConsumeNumber = rowObject.lowConsumeNumber;
                        //低消条数等于0或者为空的时候不计算，不标红;数据低于100%的时候标红色
                        if( _lowConsumeNumber ==0 || _lowConsumeNumber==null){
                            return "<div>"+ percent +"</div>"
                        }else{
                            if(lowConsumeRatio < 100 ){
                                return "<div style='background-color: red;color:#FFF;'>"+ percent +"</div>"
                            }
                            return "<div>"+ percent +"</div>"
                        }

//                        if(lowConsumeRatio < 100 ){
//                            if( _lowConsumeNumber > 0){
//                                return "<div style='background-color: red;color:#FFF;'>"+ percent +"</div>"
//                            }else {
//                                return "<div>"+ percent +"</div>"
//                            }
//                        } else {
//                            if( _lowConsumeNumber > 0){
//                                return "<div style='background-color: red;color:#FFF;'>"+ percent +"</div>"
//                            }else {
//                                return "<div>"+ percent +"</div>"
//                            }
//                        }
                    }
                },
                {label:'投诉个数',name: "complaintNumber", align: "left",sortable:false,
                    formatter:function(cellvalue, options, rowObject){
                        var cid = rowObject.channelId, channelName = rowObject.channelname;
                        var complaintNumber = rowObject.complaintNumber;
                        var dateStr = rowObject.dateStr;
                        return "<a href='javascript:;' class='complaintNumber' onclick=\"jumpPage('"+cid+"','"+channelName+"','"+dateStr+"')\">"+ complaintNumber +"</a>"

                    }
                },
                {label:'投诉率（百万分之一）',name: "complaintRatioStr", align: "left",sortable:false},
                {label:'投诉系数（百万分之一）',name: "complaintCoefficientStr", align: "left",sortable:false},
                {label:'投诉差异值（百万分之一）',name: "complaintDifference", align: "left",sortable:false,width:150,
                    formatter:function(cellvalue, options, rowObject){
                        var complaintDifference = rowObject.complaintDifference;
                        var complaintDifferenceStr = rowObject.complaintDifferenceStr;

                        if(complaintDifference < 0){
                            return "<div style='background-color: red;color:#FFF;'>"+ complaintDifferenceStr +"</div>"
                        } else {
                            return "<div>"+ complaintDifferenceStr +"</div>"
                        }
                    }
                },
                {label:'成本单价',name: "costpriceStr", align: "left",sortable:false,width:'100'},
                {label:'所属商务',name: "realname", align: "left",sortable:false,width:'100'},
                {label:'通道来源',name: "ownerTypeStr", align: "left",sortable:false,width:'100'},
                {label:'月份',name: "dateStr", align: "left",sortable:false,width:'100'}
            ],
            gridComplete: completeMethod,
            pager: "#pager_list",
            viewrecords: true,
            hidegrid: false
        });

        $(window).bind("resize", function () {
            var width = $(".jqGrid_wrapper").width();
            $("#table_list").setGridWidth(width);
        })




        function keyUp(e) {
            var currKey=0,e=e||event;
            currKey=e.keyCode||e.which||e.charCode;
            var keyName = String.fromCharCode(currKey);
            if (currKey == 13){
                search();
            }
        }
        document.onkeyup = keyUp;


        var page =  /*[[${page}]]*/'';
        if(page=="toRebatePage"){
            $("#rebateConfigPage").click();
        }
    });


    /*]]>*/
</script>
</body>
</html>